<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start start" class="m-b-20">
  <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start start" class="m-r-20" fxFlex.gt-xs="calc(50% - 24px)">
    <div class="widget m-r-20" fxFlex.gt-xs>
      <stb-widget-state
        value="8888"
        icon="group_add"
        backgroundcolor="linear-gradient(60deg, #8C99E0, #6572B8)"
        textcolor="white"
        property="用户"
        changepercent="77"
        changeicon="trending_up"
      ></stb-widget-state>
    </div>
    <div class="widget" fxFlex.gt-xs>
      <stb-widget-state
        value="8888"
        icon="pageview"
        backgroundcolor="linear-gradient(60deg, #4DD0E2, #4CA8BA)"
        textcolor="white"
        property="浏览"
        changepercent="30"
        changeicon="trending_up"
      ></stb-widget-state>
    </div>
  </div>

  <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start start" fxFlex.gt-xs="calc(50% - 24px)">
    <div class="widget m-r-20" fxFlex.gt-xs>
      <stb-widget-state
        value="8888"
        icon="link"
        backgroundcolor="linear-gradient(60deg, #81C683, #62A864)"
        textcolor="white"
        property="点击率"
        changepercent="77"
        changeicon="trending_down"
      ></stb-widget-state>
    </div>
    <div class="widget" fxFlex.gt-xs>
      <stb-widget-state
        value="8888"
        icon="monetization_on"
        backgroundcolor="linear-gradient(60deg, #EAC459, #DCAC3F)"
        textcolor="white"
        property="销量"
        changepercent="77"
        changeicon="trending_up"
        valueprefix="$"
      ></stb-widget-state>
    </div>
  </div>

</div>


<div class="card mat-elevation-z2 m-b-20">
  <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
    <div>我的任务</div>
    <div fxLayout="row">
      <button mat-icon-button>
        <mat-icon>more_vert</mat-icon>
      </button>
    </div>
  </div>
  <div class="card-content" fxLayout="column">
    <div class="task-container" fxLayout="column">
      <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
        <div fxLayout="row" fxLayoutAlign="start center">
          <mat-checkbox class="checkbox" color="primary"></mat-checkbox>
          <div>拜访客户了解需求</div>
        </div>

        <div fxLayout="row" fxLayoutAlign="end center">
          <div>10.01</div>
        </div>
      </div>
    </div>

    <div class="task-container" fxLayout="column">
      <div class="task" fxLayout="row" fxLayoutAlign="space-between center">
        <div fxLayout="row" fxLayoutAlign="start center">
          <mat-checkbox class="checkbox" color="primary"></mat-checkbox>
          <div>拜访客户了解需求</div>
        </div>

        <div fxLayout="row" fxLayoutAlign="end center">
          <div>10.01</div>
        </div>
      </div>
    </div>

  </div>
  <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
    <button mat-button>查看所有任务</button>
    <button mat-button>添加任务</button>
  </div>
</div>


<div class="card mat-elevation-z2 m-b-20">
  <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
    <div>我的消息</div>
    <div fxLayout="row">
      <button mat-icon-button>
        <mat-icon>more_vert</mat-icon>
      </button>
    </div>
  </div>
  <div class="card-content" fxLayout="column">
    <mat-list>
      <mat-list-item>
        <img mat-list-avatar src="assets/images/avatars/1.jpg">
        <h3 mat-line>滚动头条</h3>
        <p mat-line>
          <span>热点君</span>
          <span class="subline">-- 每时每刻滚动更新，轻松纵览天下头条！</span>
        </p>
      </mat-list-item>
      <mat-list-item>
        <img mat-list-avatar src="assets/images/avatars/2.jpg">
        <h3 mat-line>读心方程式</h3>
        <p mat-line>
          <span>东广新闻台</span>
          <span class="subline">-- 生活中的心理学，新闻里的小科学，读心方程式，解开你的疑惑。我们不喝鸡汤，只聊干货！节目来源上海东广新闻台《新闻实验室》栏目。</span>
        </p>
      </mat-list-item>
      <mat-list-item>
        <img mat-list-avatar src="assets/images/avatars/3.jpg">
        <h3 mat-line>话说天下事</h3>
        <p mat-line>
          <span>天津</span>
          <span
            class="subline">-- 天津人民广播电台新闻台《话说天下事》节目，充分利用新闻台讯信资源的强势，快速点击、精辟分析国际焦点、热点问题、广罗各类新闻。天津味儿的不止有相声，还有《话说天下事》！</span>
        </p>
      </mat-list-item>
    </mat-list>
  </div>
  <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
    <button mat-button>最新消息</button>
  </div>
</div>

<div class="card mat-elevation-z2 m-b-20">
  <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
    <div>我的项目</div>
    <div fxLayout="row">
      <button mat-icon-button>
        <mat-icon>more_vert</mat-icon>
      </button>
    </div>
  </div>
  <div class="card-content" fxLayout="column">
  </div>
  <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
    <button mat-button>最新项目</button>
  </div>
</div>


<div class="card mat-elevation-z2">
  <div class="card-header" fxLayout="row" fxLayoutAlign="space-between center">
    <div>我的会议</div>
    <div fxLayout="row">
      <button mat-icon-button>
        <mat-icon>more_vert</mat-icon>
      </button>
    </div>
  </div>
  <div class="card-content" fxLayout="column">
  </div>
  <div class="card-footer" fxLayout="row" fxLayoutAlign="end center">
    <button mat-button>最新会议</button>
  </div>
</div>
